﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="View.aspx.cs" Inherits="EnvironmentalMonitor.WebApplication.Environmental.Detector.View" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>
        <% = this.Description %>
    </title>
    <% = this.ReferencejQueryCss %>
    <% = this.ReferencejQueryJavascript %>
    <% = this.ReferencejQueryUiJavascript%>
    <style type="text/css">
        html, body
        {
            font-family: 微软雅黑, 新宋体, 宋体, Tahoma, Consolas, Courier New, Arial;
            font-size: 9pt;
            font-weight: bolder;
            margin: 0px;
            padding: 0px;
        }
        .draggable
        {
            width: 90px;
            height: 90px;
            padding: 0.5em;
            float: left;
            margin: 0 10px 10px 0;
        }
        #textDataViewError
        {
            color: #ff0000;
            position: absolute;
            top: 0px;
            left: 0px;
            margin: 0px;
            padding: 0px;
            z-index: 1024;
        }
        #textDataViewNormal
        {
            color: #000000;
            position: absolute;
            top: 0px;
            left: 500px;
            margin: 0px;
            padding: 0px;
            z-index: 1024;
        }
        #containmentFloorPlan
        {
            border: 1px solid #f7b850;
            position: absolute;
            top: 200px;
            left: 0px;
            margin: 0px;
            padding: 0px;
        }
        #floorPlanLayout
        {
            top: 0px;
            left: 0px;
            margin: 0px;
            padding: 0px;
        }
        #floorPlan
        {
            position: absolute;
            top: 0px;
            left: 0px;
            margin: 0px;
            padding: 0px;
            z-index: -1024;
        }
        .detectorContainer
        {
            position: absolute;
            display: block;
            width: 100px;
            height: 100px;
            overflow: hidden;
            font-family: 微软雅黑, 新宋体, 宋体, Tahoma, Consolas, Courier New, Arial;
            font-size: 9pt;
            font-weight: bolder;
            color: #1c94c4;
        }
        .detectorName
        {
            background-color: #ffffff;
            height: 20px;
        }
        .detectorImage
        {
            height: 60px;
        }
        .detectorValue
        {
            background-color: #ffffff;
            height: 20px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var listJsonUrl = '<% = this.ListJsonUrl %>';
            var saveJsonUrl = '<% = this.SaveJsonUrl %>';
            var refreshJsonUrl = '<% = this.RefreshJsonUrl %>';
            var warringSoundUrl = '<% = this.WarringSoundUrl %>';
            var dataCacheInterval = parseInt('<% = this.DataCacheInterval %>');
            var modules = null;

            $('#containmentFloorPlan').css('width', $('#floorPlan').css('width'));
            $('#containmentFloorPlan').css('height', $('#floorPlan').css('height'));
            $('#floorPlanLayout').css('width', $('#floorPlan').css('width'));
            $('#floorPlanLayout').css('height', $('#floorPlan').css('height'));
            $("#loadLayout").button();
            $("#saveLayout").button();

            var layoutInitialize = function () {
                $.ajax({
                    type: 'POST',
                    url: listJsonUrl,
                    success: function (data, textStatus, jqXHR) {
                        var result = eval('(' + data + ')');
                        if (result) {
                            if (result.rows) {
                                modules = result.rows;

                                $('#floorPlanLayout').html('');
                                var i = 0;
                                for (i = 0; i < modules.length; i++) {
                                    var draggableValue = '';
                                    draggableValue += '<table id="' + modules[i].Guid + '" cellpadding="0" cellspacing="0" border="0" class="detectorContainer">';
                                    draggableValue += '<tbody>';
                                    draggableValue += '<tr>';
                                    draggableValue += '<td class="detectorName">';
                                    draggableValue += '[';
                                    draggableValue += modules[i].Serial;
                                    draggableValue += '] ';
                                    draggableValue += modules[i].DetectorTypeName;
                                    draggableValue += '</td>';
                                    draggableValue += '</tr>';
                                    draggableValue += '<tr>';
                                    draggableValue += '<td class="detectorImage">';
                                    draggableValue += '<img id="img_' + modules[i].Guid + '" src="' + modules[i].LayoutImage + '" border="0" />';
                                    draggableValue += '</td>';
                                    draggableValue += '</tr>';
                                    draggableValue += '<tr>';
                                    draggableValue += '<td class="detectorValue" id="text_' + modules[i].Guid + '">';
                                    draggableValue += '</td>';
                                    draggableValue += '</tr>';
                                    draggableValue += '</tbody>';
                                    draggableValue += '</table>';

                                    $('#floorPlanLayout').append(draggableValue);
                                    $("#" + modules[i].Guid).draggable({ containment: "#floorPlanLayout", scroll: false, revert: true });
                                    $("#" + modules[i].Guid).css('top', modules[i].PositionY);
                                    $("#" + modules[i].Guid).css('left', modules[i].PositionX);
                                }
                            }
                        }
                    }
                });
            };
            layoutInitialize();

            var dataInitialize = function () {
                $.ajax({
                    type: 'POST',
                    url: saveJsonUrl,
                    success: function (data, textStatus, jqXHR) {
                        var result = eval('(' + data + ')');
                        if (result) {
                            if (result.rows) {
                                modules = result.rows;
                                var i = 0;
                                for (i = 0; i < modules.length; i++) {
                                    var textValue = '';
                                    textValue += modules[i].RefreshTimeText;
                                    textValue += '[';
                                    textValue += modules[i].Serial;
                                    textValue += ']';
                                    textValue += modules[i].DetectorTypeName;
                                    textValue += '：';
                                    textValue += modules[i].ViewValue;
                                    textValue += '<br />';

                                    $("#img_" + modules[i].Guid).attr('src', modules[i].ViewImage);
                                    if (modules[i].Error) {
                                        $('#textDataViewError').prepend(textValue);
                                        $("#text_" + modules[i].Guid).html('<span style="color:#ff0000">' + modules[i].ViewValue + '</span>');
                                        $('#playMessage').html('<bgsound src="' + warringSoundUrl + '" loop="1"></bgsound>');
                                    }
                                    else {
                                        $('#textDataViewNormal').prepend(textValue);
                                        $("#text_" + modules[i].Guid).html(modules[i].ViewValue);
                                    }
                                }
                            }
                        }
                    }
                });
            };
            dataInitialize();

            if ((!dataCacheInterval) || (dataCacheInterval <= 0)) {
                dataCacheInterval = 60000;
            }
            var dataInitializeInterval = setInterval(dataInitialize, dataCacheInterval);
        });
    </script>
</head>
<body>
    <div id="playMessage" style="width: 0px; height: 0px; display: none">
    </div>
    <div id="textDataViewError" style="width: 480px; height: 180px; background-color: Transparent;
        overflow-x: hidden; overflow-y: scroll">
    </div>
    <div id="textDataViewNormal" style="width: 480px; height: 180px; background-color: Transparent;
        overflow-x: hidden; overflow-y: scroll">
    </div>
    <div id="containmentFloorPlan">
        <img id="floorPlan" src="<% = this.FloorPlan %>" border="0" />
        <div id="floorPlanLayout">
        </div>
    </div>
    <iframe width="0px" height="0px" scrolling="no" frameborder="no" src="<% = this.RefreshJsonUrl %>" />
</body>
</html>
